{extend name="common/base"/}
{block name="style"}
<style type="text/css">
  /* 这段样式只是用于演示 */
  .layui-card-header span {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .layui-sales {
    margin-bottom: 0;
    overflow: hidden;
    color: rgba(0,0,0,.85);
    font-size: 30px;
  }

  .layui-sales-info {
    padding-top: 16px;
    color: rgba(0,0,0,.65);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  fieldset.layui-field-title {
    margin-bottom: 10px;
  }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-xs6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">今日访问</div>
        <div class="layui-card-body">
          <div class="layui-sales">126,560</div>
          <div class="layui-sales-info" style="height: 125px;">
            周同比 <span>12%</span>
            <i class="layui-edge layui-edge-top" style="border-bottom-color: green"></i>
            日同比 <span>3%</span>
            <i class="layui-edge layui-edge-bottom" style="border-top-color: red"></i>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 66px;"></fieldset>
            <div>日访问量 1,234</div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">下载数量<span class="layui-badge layui-badge-blue pull-right">月</span></div>
        <div class="layui-card-body">
          <div class="layui-sales">6,560</div>
          <div class="layui-sales-info" >
            <div id="zfbs" style="height: 80px;"></div>
            <fieldset class="layui-elem-field layui-field-title"></fieldset>
            <div>总数 1,234</div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">流量统计 <span class="layui-badge layui-badge-green pull-right">日</span></div>
        <div class="layui-card-body">
          <div class="layui-sales">6,560</div>
          <div class="layui-sales-info" >
            <div id="fwl" style="height: 80px;"></div>
            <fieldset class="layui-elem-field layui-field-title" ></fieldset>
            <div>日访问量 1,234</div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">转化率 <span class="layui-badge layui-badge-red pull-right">周</span></div>
        <div class="layui-card-body">
          <div class="layui-sales">83%</div>
          <div class="layui-sales-info" >
            <div style="height: 80px;">
              <div class="layui-progress layui-progress-big">
                <div class="layui-progress-bar layui-bg-blue" lay-percent="83%" style="width: 83%;"></div>
              </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="position: relative;"></fieldset>
            <div>转化数量  12,234</div>
          </div>
        </div>
      </div>
    </div>


    <div class="layui-col-xs6 layui-col-md9">
      <div class="layui-card">
        <div class="layui-card-header">地域分布</div>
        <div class="layui-card-body">
          <div id="map" style="height: 578px;"></div>
        </div>
      </div>
    </div>

    <div class="layui-col-xs6 layui-col-md3">
      <div class="layui-card" >
        <div class="layui-card-header">在线人数</div>
        <div class="layui-card-body">
          <div id="zxrs" style="height: 250px" ></div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
      <div class="layui-card"  >
        <div class="layui-card-header">浏览器分布</div>
        <div class="layui-card-body">
          <div id="llq" style="height: 250px" ></div>
        </div>
      </div>
    </div>
  </div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<script src="{__GOUGU__}/third_party/echart/china.js"></script>
<script>
  function init(layui) {
    var layer = layui.layer, table = layui.table;
  }

  // 访问量
  var fwlCharts = echarts.init(document.getElementById('fwl'));
  var fwlOptions = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '-1%',
      right: '0',
      bottom: '0',
      top: '5px',
      containLabel: false
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        show: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        show: false
      }
    ],
    series: [
      {
        name: '总量',
        type: 'line',
        stack: '总量',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#1890ff'
          }, {
            offset: 1,
            color: '#1890ff'
          }])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 156, 200, 90, 100, 165]
      },
    ]
  };

  fwlCharts.setOption(fwlOptions);

  // 渲染表信息
  var zfbsCharts = echarts.init(document.getElementById('zfbs'));

  var zfbsOptions = {
    color: ['#1890ff','#666'],
    tooltip: {},
    grid: {
      left: '0',
      right: '20',
      bottom: '30',
      containLabel: true
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      show:false,
    },
    yAxis: {
      show:false
    },
    series: [{
      type: 'bar',
      data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 500, 506],
      barMaxWidth: 45
    }]
  }

  zfbsCharts.setOption(zfbsOptions);


  // 地图数据信息
  function randomValue() {
    return Math.round(Math.random()*1000);
  }
  var mapCharts = echarts.init(document.getElementById('map'));
  var dataList=[
    {name:"南海诸岛",value:0},
    {name: '北京', value: randomValue()},
    {name: '天津', value: randomValue()},
    {name: '上海', value: randomValue()},
    {name: '重庆', value: randomValue()},
    {name: '河北', value: randomValue()},
    {name: '河南', value: randomValue()},
    {name: '云南', value: randomValue()},
    {name: '辽宁', value: randomValue()},
    {name: '黑龙江', value: randomValue()},
    {name: '湖南', value: randomValue()},
    {name: '安徽', value: randomValue()},
    {name: '山东', value: randomValue()},
    {name: '新疆', value: randomValue()},
    {name: '江苏', value: randomValue()},
    {name: '浙江', value: randomValue()},
    {name: '江西', value: randomValue()},
    {name: '湖北', value: randomValue()},
    {name: '广西', value: randomValue()},
    {name: '甘肃', value: randomValue()},
    {name: '山西', value: randomValue()},
    {name: '内蒙古', value: randomValue()},
    {name: '陕西', value: randomValue()},
    {name: '吉林', value: randomValue()},
    {name: '福建', value: randomValue()},
    {name: '贵州', value: randomValue()},
    {name: '广东', value: randomValue()},
    {name: '青海', value: randomValue()},
    {name: '西藏', value: randomValue()},
    {name: '四川', value: randomValue()},
    {name: '宁夏', value: randomValue()},
    {name: '海南', value: randomValue()},
    {name: '台湾', value: randomValue()},
    {name: '香港', value: randomValue()},
    {name: '澳门', value: randomValue()}
  ]

  // 世界地图
  var mapOption = {
    tooltip: {
      formatter:function(params,ticket, callback){
        return params.seriesName+'<br />'+params.name+'：'+params.value
      }
    },
    visualMap: {
      min: 0,
      max: 1500,
      left: 'left',
      top: 'bottom',
      text: ['高','低'],//取值范围的文字
      inRange: {
        color: ['#e0ffff', '#006edd']//取值范围的颜色
      },
      show: true//图注
    },
    geo: {
      map: 'china',
      roam: false,  //不开启缩放和平移
      zoom:1.23,    //视角缩放比例
      label: {
        normal: {
          show: true,
          fontSize:'10',
          color: 'rgba(0,0,0,0.7)'
        }
      },
      itemStyle: {
        normal:{
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        emphasis:{
          areaColor: '#F3B329',//鼠标选择区域颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    series : [
      {
        name: '信息量',
        type: 'map',
        geoIndex: 0,
        data:dataList
      }
    ]
  };
  mapCharts.setOption(mapOption);


  var myCharts = echarts.init(document.getElementById('zxrs'));
  var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500];
  var option = {


    tooltip: {
      trigger: "axis"
    },
    xAxis: [{
      type: "category",
      boundaryGap: !1,
      data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"]
    }],
    yAxis: [{
      type: "value"
    }],
    series: [{
      name: "总量",
      type: "line",
      smooth: !0,
      itemStyle: {
        normal: {
          areaStyle: {
            type: "default"
          }
        }
      },
      data: mData
    }]
  };
  myCharts.setOption(option);

  // 动态改变图表1数据
  setInterval(function () {
    for (var i = 0; i < mData.length; i++) {
      mData[i] += (Math.random() * 50 - 25);
      if (mData[i] < 0) {
        mData[i] = 0;
      }
    }
    myCharts.setOption({
      series: [{
        data: mData
      }]
    });
  }, 1000);

  // 渲染浏览器分布
  var llqCharts = echarts.init(document.getElementById('llq'));
  var llqOptions = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '1%',
      left: 'center',
      icon: 'circle', // 设置小圆点
      itemWidth: 10,  // 设置宽度
      itemHeight: 10, // 设置高度
    },

    series: [
      {
        name: '浏览器分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14px',
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 1048, name: 'Chrome'},
          {value: 735, name: 'Safair'},
          {value: 580, name: 'Firefox'},
          {value: 484, name: 'Edge'},
          {value: 300, name: 'IE'},
          {value: 200, name: 'Other'},
        ]
      }
    ]
  };
  llqCharts.setOption(llqOptions);

  // 窗口大小改变事件
  window.onresize = function () {
    myCharts.resize();
    mapCharts.resize();
    fwlCharts.resize();
    zfbsCharts.resize();
    llqCharts.resize();
  };


  //页面停留时长统计
  let stopTime;

  window.onpageshow = ()=>{
    stopTime = new Date().getTime();
  }

  window.onpagehide = ()=>{
    stopTime = new Date().getTime() - stopTime;
    let record = localStorage.getItem('data');
    console.log(record);
    let data = record && JSON.parse(record) || [];
    localStorage.setItem('data',JSON.stringify([...data,{user:new Date().getTime(),path:window.location.href,stopTime}]));
  }

</script>
{/block}
<!-- /脚本 -->